let key = '__cart__'
let cartItems = load()

function save() { // 保存
  localStorage.setItem(key, JSON.stringify(cartItems))
}
function load() { // 获取
  return JSON.parse(localStorage.getItem(key)) || []
}

function renderPlist() { // 渲染商品列表
  const plist = document.getElementsByClassName('plist')[0]//...
  /*
    <p class='p1 p2'></p>
    document.getElementById('id') // item
    document.getElementsByClassName('p1') // []
    document.getElementsByTagName('p') // []
    document.querySelector('p > span') // item
    document.querySelectorAll('p > span') // []
    dom.querySelector
  */
  const html = products.map(
    p => `<div class="item">
    <div class="title">${p.name}</div>
    <img src="${p.image}">
    <div class="price">
      <button class='add-cart-btn'
              data-id='${p.id}'
      >${p.price}元 加入购物车</button>
    </div>
  </div>`
  ).join('')

  plist.innerHTML = html
}

function renderCartItems() { // 渲染购物车列表
  const list = document.querySelector('.cart')
  const html = cartItems.map(item => `<div class='cart-item'>
  <div class='title'>${item.name}</div>
  <img src="${item.image}">
  <div class=''>数量：<input type="number" size='3'
      value='${item.count}'
      data-id='${item.id}'></div>
  <div>价格：${item.price}元</div>
  <div><button class='remove-cart-btn'
      data-id='${item.id}'>删除</button></div>
</div>`).join('')
  list.innerHTML = html
}
function renderTotal() {//总价
  let total = 0
  cartItems.forEach(item => {
    total += item.price * item.count
  })
  document.getElementById('total').innerHTML = total.toFixed(2)
}
function renderCart() {
  renderCartItems()
  renderTotal()
}

function bindEvents() { // 绑定事件
  // 在class='content'的div上绑定click事件
  //  .addEventListener('click', 回调函数)
  //    event.target - 得到触发这个事件的元素
  //    element.getAttribute('属性名')
  const content = document.querySelector('.content')
  content.addEventListener('click', (event) => {
    // console.log(event.target.classList.contains('add-cart-btn'))
    // console.log(event.target.className === 'add-cart-btn')
    if (event.target.className === 'add-cart-btn') {
      // 点击添加购物按钮
      console.log(event.target.getAttribute('data-id'))
      addCartItem(event.target.getAttribute('data-id'))
    }
    if (event.target.className === 'remove-cart-btn') {
      // 点击删除按钮
      let id = event.target.getAttribute('data-id')
      console.log('删除', id)
      removeCartItem(event.target.getAttribute('data-id'))
    }
    if (event.target.className === 'cart-clr-btn') {
      // 点击清空按钮
      console.log('清空')
      clearCartItems()
    }
    renderCart()
    save()
  })
  content.addEventListener('change', event => {
    let input = event.target
    let id= input.getAttribute('data-id')
    let value = parseInt(input.value)
    if (value>0) {
      updateCartItem(id, value)
    }else {
      input.value = 1
    }
    renderTotal()
    save()
  })
}

function addCartItem(id) { // 增加购物车
  let item = cartItems.find(item => item.id === id) // 从购物车里找到item
  if (item) {
    item.count += 1
  } else { // 购物车里没有这个商品
    let product = products.find(p => p.id === id) // 从商品中找出对应id的商品
    item = {...product, count: 1}
    cartItems.push(item)
  }
}
function removeCartItem(id) { // 删除购物车
  // let itemIndex = cartItems.findIndex(item => item.id === id) //从购物车中找到对应数据
  // if (itemIndex > -1) {
  //   cartItems.splice(itemIndex, 1)
  // }
  cartItems = cartItems.filter(item => item.id!==id)
  // 把这个数据从cartItems里删除
}
function updateCartItem(id, count) { // 更新购物车
  let item = cartItems.find(item => item.id === id)
  item.count = count
}
function clearCartItems() { // 清空购物车
  cartItems = []
}

renderPlist()
renderCart()
bindEvents()